<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>活动详情</title>

    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&display=swap" rel="stylesheet">
    <style>
        :root{
            --bg:#f6f8fa;
            --card:#ffffff;
            --accent:#2b7cff;
            --muted:#6b7280;
            --maxw:760px;
        }
        *{box-sizing:border-box}
        body{
            margin:0;
            font-family:'Noto Sans SC', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
            background:var(--bg);
            color:#0f172a;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
            padding:32px 16px;
            display:flex;
            align-items:center;
            justify-content:center;
            min-height:100vh;
        }
        .card{
            width:100%;
            max-width:var(--maxw);
            background:var(--card);
            border-radius:12px;
            box-shadow:0 8px 24px rgba(16,24,40,0.08);
            padding:32px;
        }
        header{margin-bottom:8px}
        h1{
            margin:0 0 6px 0;
            font-size:26px;
            letter-spacing:0.2px;
        }
        .subtitle{
            margin:0 0 20px 0;
            color:var(--muted);
            font-weight:300;
        }
        .content p{
            margin:0 0 12px 0;
            line-height:1.8;
            font-size:16px;
        }
        /* small screen tweaks */
        @media (max-width:520px){
            body{padding:20px}
            .card{padding:20px}
            h1{font-size:22px}
        }
    </style>
</head>
<body>
<main class="card" role="main" aria-labelledby="activity-title">
    <header>
        <h1 id="activity-title">这里是社团活动详情</h1>

        <p class="subtitle">活动信息</p>
    </header>
    <section class="content" aria-describedby="activity-desc">
        <p id="activity-desc">这里将显示活动的具体介绍和内容。</p>
    </section>
</main>
</body>
</html>